<template>
	<view class="service">
		<p-navbar :unshow="true"  title="客服"></p-navbar>
		<scroll-view :scroll-top="scrollTop"  scroll-y="true" class="scroll-s" :style="{'height':(screenHeight-keyHeight)+'px'}"  >
			 <!-- :style="{'margin-bottom':keyHeight!=0?'140rpx':'0rpx'}" -->
			<view class="container">
				<view class="scroll">
					<view class="wrap left">
						<image class="avatar" src="../../static/user/kefu1.png"></image>
						<view class="content">您好，我是诸葛量化助手</view>
					</view>
					<view class="wrap" v-for="item in chatRecord" :key="item.id" :class="item.fromType === 1 ? 'right' : 'left'">
						<image class="avatar" :src="userinfo.image" v-if="item.fromType=='1'"></image>
						<image class="avatar" src="../../static/user/kefu.png" v-else></image>
							<view class="content" v-if="item.type=='1'">
								<view>{{ item.messageBody }}</view>
							</view>
						<view class="content1" v-else>
							<view @tap="prev(item.messageBody)">
								<image :src="item.messageBody" style="width: 180rpx;height: 180rpx;" mode="aspectFill" />
							</view>
						</view>
						<text class="fooler">{{item.adminIsRead=='0'?'未读':'已读'}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="reply" style="display: flex;align-items: center;" :style="{'margin-bottom':keyHeight+'px'}">
			<view class="wrap" style="width: 88%;">
				<input placeholder="请输入您想对客服说的话？" @focus="focus" placeholder-class="placeholder" :adjust-position="bloo" confirm-type="send"
				 v-model.trim="content" @confirm="addReply(1)" />
				<view class="jia">
					<image @tap="choose" style="width: 30rpx;height: 30rpx;" src="../../static/user/jia.png" mode=""></image>
				</view>
			</view>
			<view style="border: 1px solid #666;border-radius: 50%;padding: 10rpx 10rpx;margin-left: 15rpx;" @tap="addReply(1)">
				<image src="../../static/user/fs.png" style="width: 35rpx;height: 25rpx;" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bloo: false, //禁止获取焦点上推页面
				scrollTop: 999999,
				chatRecord: [], // 聊天记录
				content: '', // 回复内容
				interval: null, // 定时刷新聊天记录
				uid: uni.getStorageSync("uid"),
				inter: null,
				screenHeight: '',
				keyHeight: 0, //键盘高度
				top: '', //监听滚动最大值位置
				tops: '', //监听滚动位置
				page:1,
			};
		},
		computed: {
			userinfo(){//用户信息
				return this.$state.userinfo
			},
		},
		onLoad() {
			console.log(this.userinfo)
			let data = uni.getSystemInfo()
			data.then(res => {
				this.screenHeight = res[1].screenHeight - 160
			})
			this.getChatRecord();//聊天记录
			this.data()//定时
			this.focus()
			setTimeout(()=>{
				this.$nextTick(()=>{
					this.scrollTop = 999999
				})
			},1000)
		},
		onUnload() {
			clearInterval(this.inter);
		},
		onHide() {
			clearInterval(this.inter);
		},
		methods: {
			focus() {
				uni.onKeyboardHeightChange(res => {
					if (!this.keyHeight || this.keyHeight == '0') {
						this.keyHeight = res.height
						console.log('123')
						this.scrollTop=Number(this.scrollTop+100)
						this.$forceUpdate()
					} else {
						this.keyHeight = 0
					}
					// console.log(this.keyHeight)
				})
				
			},
			// focues(){},
			data() {
				this.inter = setInterval(() => {
					this.getChatRecord()
				}, 5000);
			},
			prev(url) {
				let data = []
				data.push(url)
				uni.previewImage({
					current: url, // 当前显示图片的http链接
					urls: data // 需要预览的图片http链接列表
				})
			},
			async choose() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: async res => {
						const image = await this.util.upload(res.tempFiles[0]);
						if (!image) return this.util.toast('图片发送失败');
						this.content = image
						this.addReply()
					}
				});
			},
			// 获取聊天记录
			getChatRecord() {
				this.request.post(`kefuMessage/list?pageSize=50&page=${this.page}`).then(res => {
					this.chatRecord=res.data.data
					this.chatRecord=this.chatRecord.reverse()
						this.scrollTop=Number(this.scrollTop+100)//获取数据 滚动到底部
					// setTimeout(()=>{
					// 	this.$nextTick(()=>{
					// 		this.scrollTop=Number(this.scrollTop+100)
					// 	})
					// },100)
				})
			},
			// 发送文字消息
			addReply(e = '2') {
				if (!this.content) {
					uni.showToast({
						title: "请输入内容",
						icon: "none"
					})
					return;
				}
				this.request.post('kefuMessage/send', {
					fromType:'1',//1：用户 2：客服
					type:e,//1:文本 2:图片
					messageBody: this.content, //0-文字1-图片
					userId: uni.getStorageSync('Login').id, //用户ID
				}).then(res => {
					if (res.data.code === 1) {
						this.page=1;
						this.getChatRecord();
						this.content = '';
					}
				});
			},
		}
	}
</script>

<style lang="scss">

	.container {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;

	}

	.scroll {
		height: 100%;
		width: 100%;

		.wrap {
			display: flex;
			justify-content: flex-start;

			+.wrap {
				margin-top: 50rpx;
			}

			&.left {
				.avatar {
					margin-right: 30rpx;
				}

				.content {
					position: relative;
					padding-top: 30rpx;

					border-radius: 0 12rpx 12rpx 12rpx;

					.text {
						position: absolute;
						left: -60rpx;
						font-size: 20rpx;
						color: #E0E0E0;
					}
				}
				
			}

			&.right {
				flex-direction: row-reverse;

				.avatar {
					margin-left: 30rpx;
				}

				.content {
					position: relative;
					padding-top: 30rpx;
					border-radius: 0 12rpx 12rpx 12rpx;

					.text {
						position: absolute;
						left: -50rpx;
						bottom: 10rpx;
						font-size: 20rpx;
						color: #000;
					}
				}
			}
		}

		.avatar {
			height: 85rpx;
			width: 85rpx;
			border-radius: 15rpx;
			box-sizing: border-box;
			flex-shrink: 0;
		}

		.content {
			padding: 24rpx;
			font-size: 24rpx;
			line-height: 1.2;
			word-break: break-all;
			max-width: calc(100% - 85rpx - 30rpx - 85rpx - 30rpx - 10rpx);
			background-color: $color-bgs;

			image {
				padding: 0;
				width: 220rpx;
				height: 234rpx;
			}

			&.image {
				padding: 0;
				overflow: hidden;
				display: flex;
			}
		}
	}

	.placeholder {
		color: #818181;
	}

	.reply {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 30rpx;
		height: 140rpx;
		box-sizing: border-box;
		// border-top: 2rpx solid #e0e0e0;
		background: $color-bgs;

		.wrap {
			background: #F5F5F5;
			height: 100%;
			width: 100%;
			border-radius: 140rpx;
			@include flex;
			justify-content: space-between;
			padding: 0 40rpx;
		}

		input {
			font-size: 24rpx;
			height: 60%;
			width: calc(100% - 55rpx - 25rpx);
		}

		.add {
			width: 55rpx;
			height: 55rpx;
		}
	}

	.content1 {
		padding: 24rpx;
		font-size: 24rpx;
		line-height: 1.2;
		word-break: break-all;
		border-radius: 20rpx;
		max-width: calc(100% - 85rpx - 30rpx - 85rpx - 30rpx - 10rpx);
		background-color: $color-bgs;
		
	}

	.scroll-s {
		// border: 1px solid red;
		// height: 90vh;
	}
	.fooler{
		padding: 50rpx 10rpx 0rpx;
		font-size: 20rpx;
		color: $color-fu;
	}
</style>
